/* ------------------------------------------------------------------------------
*
*  # C3 charts
*
*  Styles for C3.js visualization library
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */

// Core
// ------------------------------

.c3 {

  // Use smaller text
  svg {
    font-size: @font-size-small;
  }

  // Paths and lines defaults
  path,
  line {
    fill: none;
    stroke: @text-muted;
  }
  path.domain {
    shape-rendering: crispEdges;
  }

  // Disable text selection
  text {
    .user-select(none);
  }
}

// Components
// ------------------------------

// Default shape rendering style
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges;
}

// Arcs
.c3-chart-arc {
  path {
    stroke: #fff;
  }

  text {
    fill: #fff;
    font-size: @font-size-base;
  }
}

// Grid
.c3-grid {
  line {
    stroke: #aaa;
  }

  text {
    fill: #aaa;
  }
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3;
}

// Text on chart
.c3-text {
  font-weight: 500;

  &.c3-empty {
    fill: #808080;
    font-size: 2em;
  }
}

// Line
.c3-line {
  stroke-width: 2px;
}

// Area
.c3-area {
  stroke-width: 0;
  .opacity(0.4);
}

// Point
.c3-circle._expanded_ {
  stroke-width: 1.5px;
  stroke: #fff;
}

.c3-selected-circle {
  fill: #fff;
  stroke-width: 2px;
}

// Bar
.c3-bar {
  stroke-width: 0;

  &._expanded_ {
    fill-opacity: 0.75;
  }
}

// Arc
.c3-chart-arcs-title {
  font-size: 1.3em;
}

.c3-chart-arcs {
  .c3-chart-arcs-background {
    fill: #e0e0e0;
    stroke: none;
  }

  .c3-chart-arcs-gauge-unit {
    fill: @text-color;
    font-size: @font-size-h6;
  }

  .c3-chart-arcs-gauge-max,
  .c3-chart-arcs-gauge-min {
    fill: @gray-light;
  }
}

.c3-chart-arc .c3-gauge-value {
  fill: @text-color;
  font-size: 28px;
}

// Focus
.c3-target {
  &.c3-focused {
    .opacity(1);

    path.c3-line,
    path.c3-step {
      stroke-width: 2px;
    }
  }

  &.c3-defocused {
    .opacity(0.3) !important;
  }
}

// Region
.c3-region {
  fill: @color-slate-600;
  fill-opacity: .1;
}

// Brush
.c3-brush .extent {
  fill-opacity: .1;
}

// Legend
.c3-legend-item {
  font-size: @font-size-small;
}

.c3-legend-background {
  fill: #fff;
  stroke: lightgray;
  stroke-width: 1;
  .opacity(0.75);
}

// Tooltip
.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  .opacity(0.95);

  th {
    background-color: #333;
    padding: 4px 10px;
    text-align: center;
    color: #fff;
    border: 1px solid #333;
    font-weight: 500;
  }

  td {
    font-size: @font-size-small;
    padding: 6px 10px;
    background-color: #fff;
    border: 1px solid #ddd;

    > span {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 6px;
    }

    &.value {
      text-align: right;
    }
  }
}
